<template>
  <v-card
    class="item-card pa-3 mb-0"
    :rounded="false"
    min-width="250"
    variant="outlined"
    @click="gotoRecord"
    style="cursor: pointer"
  >
    <v-card-text>
      <v-row class="justify-space-between">
        <div class="font-weight-bold">体质诊断结果</div>
        <div class="mr-3 text-grey mb-1">
          <span class="mr-4"><strong>检测时间:</strong></span>
          <span>{{ utcToLocal(item.createTime) }}</span>
        </div>
      </v-row>
      <v-row>
        <v-sheet
          border
          class="pa-1"
        >
          <v-chip
            size="small"
            variant="flat"
            v-for="(item, idx) in detail()"
            :key="item.corp"
            class="ma-1"
            :color="`indigo-lighten-${1 + idx}`"
            label
            :prepend-icon="idx == 0 ? 'mdi-tag' : ''"
          >
            {{ item.cor }}/{{ parseFloat(item.prob).toFixed(1) }}%
          </v-chip>
        </v-sheet>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup>
  import { useRouter } from "vue-router";
  import { utcToLocal } from "../utils/dateUtils";

  const props = defineProps({
    item: {
      type: Object,
      required: true,
    }
  });

  const router = useRouter();
  const detail = () => {
    return JSON.parse(props.item.countDetail);
  };

  const gotoRecord = () => {
    if (props.item) {
      router.push({ name: 'RecordDetail', params: {id: props.item.id}});
    }
  };
</script>

<style scoped>
  .item-card {
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
</style>
